@extends('admin.base')

@section('content')
    <style>
        .layui-table-cell {
            height: inherit;
        }
    </style>
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">

            <div class="layui-form-item">
                <div class="layui-form">
                    <div class="layui-input-inline" @if (!empty($citycode)) style="display: none"; @endif>
                        <select name="city_code" lay-search="" id="city_code" >
                            <option value="0">搜索/选择城市</option>
                            @foreach($citys as $ProvinceName=>$v)
                                <optgroup label="{{$v['province']['name']}}">
                                    @foreach($v['city'] as $c)
                                    <option value="{{$c['code']}}" @if ( $c['code'] == $citycode) ' selected="selected"' @endif>{{$c['name']}}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>

                    <div class="layui-input-inline">
                        <select name="site_id" lay-search="" id="site_id">
                            <option value="">请选择站点</option>
                            @foreach($site as $key => $value)
                            <option value="{{$key}}">{{$value}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="layui-input-inline">
                        <select name="pay_status" lay-search="" id="status" >
                            <option value="">请选择状态</option>
                            <option value="0">未使用</option>
                            <option value="1">已使用</option>
                            <option value="2">已退款</option>
                        </select>
                    </div>

                    <div class="layui-input-inline">
                        <select name="pay_status" lay-search="" id="type" >
                            <option value="">请选择支付方式</option>
                            <option value="0">积分</option>
                            <option value="1">余额</option>
                            <option value="2">年卡</option>
                            <option value="3">季卡</option>
                            <option value="4">月卡</option>
                            <option value="5">次卡</option>
                            <option value="6">即充即用</option>
                        </select>
                    </div>

                    <div class="layui-input-inline">
                        <input type="text" name="order_sn" id="order_sn" placeholder="订单号、手机号" class="layui-input">
                    </div>

                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="daterange" name="daterange" placeholder="下单时间搜索" value="">
                    </div>
                <button class="layui-btn" id="searchBtn">搜 索</button>
            </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('order.siteorder.list')
                        @{{#  if(d.status < 2 && d.type == 6){ }}
                            @{{#  if(typeof d.userrechage == 'object' && d.userrechage.pay_status == 2){ }}
                                <a class="layui-btn layui-btn-sm" lay-event="refund">退款</a>
                            @{{# }else{ }}
                                <a class="layui-btn layui-btn-disabled layui-btn-sm">充值未完</a>
                            @{{#  } }}    
                        @{{#  } }}
                        <!--<a class="layui-btn layui-btn-sm" lay-event="remarks">备注</a>-->
                    @endcan
                    
                </div>
            </script>
            <script type="text/html" id="district">
                @{{#  if(d.district){ }}
                @{{d.district.name}}
                @{{#  } }}
            </script>
        </div>
    </div>
@endsection

@section('script')
@can('changzu.site')
<script>
layui.use(['layer', 'table', 'form', 'laydate'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var laydate = layui.laydate;
    var modal;

    laydate.render({
        elem: '#daterange'
        ,range: '~',
        done: function(value, date, endDate){

        }
    });

    //用户表格初始化
    var dataTable = table.render({
        elem: '#dataTable'
        , autoSort: false
        , height: 'auto'
        , url: "{{ route('admin.siteorder.data') }}" //数据接口
        , page: true //开启分页
        , cols: [[ //表头
            //{checkbox: true, fixed: true}
            {field: 'id', title: 'ID', width: 70}
            , {field: 'name', title: '站点名称', width: 120, templet:function(d){
                    return d.site.name;
            }}
            //, {field: 'region_name', title: '城市', width: 80, templet:function(d){
            //        return d.site.city_name;
            //}}
            , {field: 'type', title: '支付类型',width:90,templet:function(d){
                if (d.type == 0) return '余额/积分';
                if (d.type == 2) return '年卡';
                if (d.type == 3) return '季卡';
                if (d.type == 4) return '月卡';
                if (d.type == 5) return '次卡';
                if (d.type == 6) return '即充即用';

            }}
            , {field: 'order_sn', title: '订单号',templet:function(d ){
                if (d.type == 6 && d.userrechage){
                    return d.order_sn+"<br>"+d.userrechage.order_sn;
                }else{
                    return d.order_sn;
                }
            }}
            , {field: 'nickname', title: '用户信息', width:136, templet: function(d){
                return d.user.nickname+"<br>"+d.user.mobile;
            }}
            // , {field: 'mobile', title: '手机号码', templet: function(d){
            //     return d.user.mobile;
            // }}
            // , {field: 'openid', title: 'openid'}
            , {field: 'money', title: '金额', width: 60}
            , {field: 'points', title: '积分', width: 60}
            , {field: 'status', title: '状态', width: 80, templet:function(d){
                    if (d.status == 0){
                        return '未使用';
                    }else if (d.status == 1){
                        return '<font color="green">已使用</font>';
                    }else if (d.status == 2){
                        return '<font color="orange">已退款</font>';
                    }
            }}
            , {field: 'created_at', title: '下单时间'}
            , {fixed: 'right', width: 120, align: 'center', toolbar: '#options'}
        ]]
        ,done: function(res, curr, count){
            
        }
    });
    //监听工具条
    table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'refund') {
             //location.href = '/admin/siteorder/refund?id=' + data.id;
             modal2 = layer.open({
                        type: 2,
                        title: '订单退款',
                        area: ['60%', '85%'],
                        content: '/admin/siteorder/refund?id=' + data.id,
                        success: function (res) {
                            //console.log(res);
                            if (res.code == 0){
                                layer.close(modal);
                                // table.reload('dataTable');
                            }
                        }
                    });
        }else if (layEvent === 'remarks'){
            modal2 = layer.open({
                type: 2,
                title: '关联机器',
                area: ['50%', '90%'],
                content: '/admin/siteorder/remarks?id=' + data.id,
                success: function (res) {
                    if (res.code == 0){
                        layer.close(modal);
                    }
                }
            });
        }
    });

    //搜索
    $("#searchBtn").click(function () {
        var city_code = $("#city_code").val();
        var site_id = $("#site_id").val();
        var status = $("#status").val();
        var type = $("#type").val();
        var order_sn = $("#order_sn").val();
        var datearra = $("#daterange").val().split("~");
        dataTable.reload({
            where: {city_code: city_code,site_id:site_id,status:status,type:type, order_sn:order_sn, starttime: datearra[0], endtime: datearra[1] },
            page: {curr: 1}
        })
    });


})
</script>
@endcan
@endsection
